<template>
	<view class="groupitem">

		<view class="item-header">
			<text v-if="groupItem.kind == 'group'">食物分类</text>
			<text v-if="groupItem.kind == 'brand'">热门品牌</text>
			<text v-if="groupItem.kind == 'restaurant'">连锁餐饮</text>
		</view>

		<view class="item-list">
			<view @click="toDetailList({ kind: groupItem.kind, cate:cate})" class="cate"
				v-for="cate in groupItem.categories" :key="cate.id">
				<image :src="cate.image_url" :style="groupItem.kind == 'group' ? 'height:50px;' : 'height:30px;'"
					alt="" />
				<text>{{ cate.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HomeGroupItem",
		props: ["groupItem"],
		data() {
			return {

			};
		},
		methods: {
			toDetailList: function(event) {
				uni.navigateTo({
					url:`../../subpkg/Detailslist/Detailslist?event=`+JSON.stringify(event)
				})
				// this.$router.push({
				// 	path: "/detailslist",
				// 	query: event
				// });
			},
		}
	}
</script>

<style lang="scss">
	.groupitem {
		margin: 15px 20px;
		background: #ffffff;
		overflow: hidden;
		margin-bottom: 30px;

		.item-header {
			color: #a2a2a2;
			font-size: 15px;
			padding: 10px 0;
			border-bottom: 1px dashed #e8e8e8;
			position: relative;

			&::after {
				position: absolute;
				content: "";
				left: 0;
				top: 30px;
				width: 10px;
				height: 20px;
				border-radius: 0 20px 20px 0;
				background: #f6f6f6;
			}

			&::before {
				position: absolute;
				content: "";
				right: 0;
				top: 30px;
				width: 10px;
				height: 20px;
				border-radius: 20px 0 0 20px;
				background: #f6f6f6;
			}
		}

		.item-list {
			padding: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.cate {
				margin: 15px 0;
				width: 30%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				text {
					color: #8a8a8a;
					font-size: 14px;
					margin: 10px 0;
				}

				image {
					width: 50px;
				}
			}
		}
	}
</style>
